<template>
	<div class="integral_goods_add_edit">
		<el-tabs v-model="tab" :before-leave="onTabBefore">
			<el-tab-pane :label="`基本`" name="basic"><basic v-if="tab" ref="basic"></basic></el-tab-pane>
			<el-tab-pane :label="`详情`" name="detail"><detail v-if="tab" ref="detail" @detail="detail"></detail></el-tab-pane>
			<el-tab-pane :label="`分享设置`" name="shareSet"><shareSet v-if="tab" ref="shareSet"></shareSet></el-tab-pane>
			<div class="btn">
				<use-affix ref="useAffix" position="bottom" :offset="58">
					<el-button :loading="formLoading" round icon="el-icon-check" class="confirm-btn" @click="submitForm">确定</el-button>
					<el-button round icon="el-icon-back" class="return-btn" @click="returnPage">返回</el-button>
				</use-affix>
			</div>
		</el-tabs>
		<el-backtop target=".el-tabs__content"></el-backtop>
	</div>
</template>

<script>
import basic from './basic';
import detail from './detail.vue';
import shareSet from './share_set';
const __goodsCategory = 'wmzmall-integral-category';
const __name = 'wmzmall-integral-goods';
export default {
	components: {
		basic,
		detail,
		shareSet
	},
	data() {
		return {
			dataId: '',
			formLoading: false,
			tab: '',
			requestSta: false,
			tabsStorage: ''
		};
	},
	methods: {
		async loadData() {
			let category = this.$db[__goodsCategory].totree({ orderby: 'sort asc', startWith: 'pid == ""' });
			let datas = await Promise.all([category]);
			this.$refs.basic.setBaseData(datas);

			if (!this.dataId) {
				this.$db[__name].getsort().then(res => {
					if (res.code == 200) {
						this.requestSta = true;
						this.$refs.basic.setSort(res.datas.sort);
					}
				});
				return;
			}

			this.$func.wmzadmin.call('integral/detail', { goods_id: this.dataId }).then(res => {
				if (res.code == 200) {
					this.$refs.basic.setData(res.datas.goods);
					this.$refs.detail.setData(res.datas.goods);
					this.$refs.shareSet.setData(res.datas.goods);
					this.requestSta = true;
				}
			});
		},
		onTabBefore(activeName, oldActiveName) {
			let flag = true;

			if (!this.$refs.basic) return;

			if (!this.requestSta) {
				flag = false;
			}

			if (this.requestSta) {
				this.$refs.basic.getData((res, valid) => {
					flag = valid;
					
					if (!valid && this.tab != 'basic') {
						flag = true;
						this.tab = 'basic';
					}
					
					if (flag) {
						uni.setStorage({
							key: this.tabsStorage,
							data: activeName
						});
					
						this.$nextTick(() => {
							this.$api.scrollOnStorage('.el-tabs__content', this.$route.path + '-' +
								activeName);
					
							this.$api.scrollToStorage('.el-tabs__content', this.$route.path + '-' +
								activeName);
					
							this.$refs.useAffix.getAffixScrollBox();
						});
					
						return;
					}
					
					uni.setStorage({
						key: this.tabsStorage,
						data: oldActiveName
					});
				});
			}

			return flag;
		},
		submitForm() {
			this.formLoading = true;
			
			let goods = {};
			this.$refs.basic.getData((res, valid) => {
				if (!valid) {
					this.tab = 'basic';
					this.formLoading = false;
					return;
				}
				goods = res;

				this.$refs.detail.getData((res, valid) => {
					if (!valid) {
						this.tab = 'detail';
						this.formLoading = false;
						return;
					}
					goods.desc_mobile = res.content;
					goods.img = res.imgs[0].url;
					goods.imgs = res.imgs;
					for (const key in goods) {
						if (goods.hasOwnProperty(key)) {
							if (typeof goods[key] === 'string') {
								if (/^[0-9]*$/.test(goods[key])) {
									goods[key] = parseInt(goods[key]);
								} else if (/^[0-9]+(.[0-9]{1,3})?$/.test(goods[key])) {
									goods[key] = parseFloat(goods[key]);
								}
							}
						}
					}
					goods.desc_mobile = goods.desc_mobile.replace(/inline-/gi, '');

					this.$refs.shareSet.getData((res, valid) => {
						if (!valid) {
							this.tab = 'shareSet';
							this.formLoading = false;
							return;
						}
						goods.share_title = res.share_title;
						goods.share_img = res.share_img;
						goods.share_desc = res.share_desc;

						if (!this.dataId) {
							this.$func.wmzadmin
								.call('integral/add', {
									goods
								})
								.then(res => {
									if (res.code == 200) {
										this.$message({
											message: res.datas.msg,
											type: 'success'
										});
										this.returnPage();
									}
									this.formLoading = false;
								});
						} else {
							this.$func.wmzadmin
								.call('integral/edit', {
									goods_id: this.dataId,
									goods
								})
								.then(res => {
									if (res.code == 200) {
										this.$message({
											message: res.datas.msg,
											type: 'success'
										});
										this.returnPage();
									}
									this.formLoading = false;
								});
						}
					});
				});
			});
		},
		returnPage() {
			uni.$emit('closeTab');
			uni.redirectTo({ url: '/pages/integral/goods/integral_goods' });
		}
	},
	created() {
		this.dataId = this.$route.query.id || '';
		this.tabsStorage = '__tabs' + this.$route.path;
		this.loadData();
	},
	mounted() {
		this.tab = uni.getStorageSync(this.tabsStorage) || 'basic';

		if (!this.dataId) {
			this.tab = 'basic';
			uni.removeStorageSync(this.tabsStorage);
		}

		const ele = document.querySelector('.el-tabs__content');
		let offset = this.$api.offset(ele);

		ele.style.position = 'fixed';
		ele.style.top = offset.t + 29 + 'px';
		ele.style.left = 'calc(16px + var(--window-left))';
		ele.style.bottom = '16px';
		ele.style.right = '16px';
		ele.style.overflow = 'auto';
		ele.style.overflow = 'overlay';
		
		this.$nextTick(() => {
			this.$api.scrollOnStorage('.el-tabs__content', this.$route.path + '-' + this.tab);
		
			this.$api.scrollToStorage('.el-tabs__content', this.$route.path + '-' + this.tab);
		});
	}
};
</script>

<style>
.integral_goods_add_edit .btn {
	background-color: #fff;
	padding-left: 170px;
	margin-top: -20px;
	border-radius: 10px;
	padding-bottom: 42px;
}

.integral_goods_add_edit >>> .el-tabs__content {
	transition: all 0.35s;
	border-radius: 10px;
}
</style>
